<script lang="ts">
export default {
  name: 'kaoshi3'
}
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue'

const todos = reactive(['Sample Todo 1', 'Sample Todo 2', 'Sample Todo 3'])

const newTodo = ref('')

function addTodo() {
  if (newTodo.value.trim()) {
    todos.push(newTodo.value)
    newTodo.value = '' // 清空输入框
  }
}

function removeTodo(index: number) {
  todos.splice(index, 1)
}
</script>
<template>
  <div class="todo-list">
    <h2>Todo List</h2>
    <input v-model="newTodo" placeholder="Add a new todo" />
    <button @click="addTodo">Add</button>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.todo-list {
  text-align: center;

  input {
    padding: 5px;
    margin-right: 10px;
  }

  button {
    padding: 5px;
    background-color: #2196f3;
    color: white;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: #0b7dda;
    }
  }

  ul {
    list-style: none;
    padding: 0;

    li {
      cursor: pointer;
      padding: 10px;
      margin: 5px 0;
      background-color: #f1f1f1;

      &:hover {
        background-color: #ddd;
      }
    }
  }
}
</style>
